/*
 * @Author: yangjinlai
 * @Date: 2020-09-01
 * 资产配置列表
 */
<template>
    <section class="assetList">

        <page-title :title="title":rightIconButton="rightIconButton">
            <div class="newAssetBox">
                <div class="triangle"></div>
                <div class="oneLine lineCommon" @click="goAssetStep('add')">
                    <a class="lineCommonA" href="javascript:;">新建资产配置</a>
                </div>
                <div class="twoLine lineCommon" @click="shareZcpz()">
                    <a class="lineCommonA" href="javascript:;">问卷邀答</a>
                </div>
            </div>
        </page-title>

        <!-- tab 待确认  已完成-->
        <div class="needPosition">
            <div class="titleName">
                <span v-for="(item,index) in tabItems" :class="isChecked == index ?'active':''" @click="getItemIndex(index)" :key="index">{{item}}</span>
            </div>
        </div>

        <!-- 搜索框 -->
        <search-input :searchPrompt="searchPrompt" :searchData="sendData.customerName" :searchBtnTxt="searchBtnTxt"></search-input>

        <!-- 列表  start -->
        <!-- 待确认和已完成 使用一个列表 -->
        <!-- 点击tab的时候  重新请求数据 -->
        <div class="listWrap clearfix " ref="complateTabBottom">

            <mt-loadmore id='refresh' :bottom-all-loaded="allLoaded" ref="allLoadMore" :bottomDistance="30" v-if="!noData">

                <ul class="customBox" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" nfinite-scroll-immediate-check="true" infinite-scroll-distance="20" >

                    <!--子项-->
                    <li class="RecordItem clearfix" htmdEvt="dueFundsDetail_btn" v-for="item in listData">
                        
                        <div class="customContain">
                            <div class="nameLine">
                                <div class="leftBorder"></div>
                                <div class="costomName">{{item.customerName}}</div>
                                <div class="riskLevel">
                                    <span>{{item.riskTypeText || "--"}}</span>
                                </div>
                            </div>
                            <div class="decLine">
                                <div class="assetNum">
                                    <div class="assetNumtitle decLineTitle">{{item.canConfigAssets}}</div>
                                    <div class="assetNumDec decLineDec">可配置资产（万元）</div>
                                </div>
                                <div class="middleLine"></div>
                                <div class="lifeCycle">
                                    <div class="decLineTitle">{{item.lifeTermText || "--"}}</div>
                                    <div class="decLineDec">客户生命周期</div>
                                </div>
                            </div>

                            <!-- 待处理列表时展示 -->
                            <div class="statusTip statusTipCommon" v-if="isChecked == 0">
                                <div class="statusDec">该客户当前信息未确定</div>
                                <div class="statusTipRight" @click="goAssetStep('confirm', item.id)">
                                    <span>去确认&nbsp;</span>
                                    <i class="iconfont fundSearchIcon">&#xe653;</i>
                                </div>
                            </div>

                            <!-- 全部列表时显示 -->
                            <div class="statusTipAll statusTipCommon" v-else>
                                <div class="operateButton" @click="gotoDetail(item.id, item.isReportable)">查看报告</div>
                                <div class="operateButton" @click="goAssetStep('edit',item.id)">编辑信息</div>
                                <div class="operateButton" @click="sendCustomer( item.id )">推送报告</div>
                            </div>
                        </div>
                    </li>
                </ul>
                <noMore v-if="noMore && noMoreDouble"></noMore>
            </mt-loadmore>

            <!-- 列表底部的loading -->
            <div class="loadingBox" v-if="loading">
                <mt-spinner type="snake" class="loading-more" color="#FF8637"></mt-spinner>
            </div>
        </div>

        <!-- 暂无数据组件 -->
        <div class="nodata" v-if="noData">
            <newNoData :imgTop='imgTop' :tipTop='tipTop' :tipName='tipName'></newNoData>
        </div>

        <message-box ref="messageBox"></message-box>

    </section>

</template>

<script>

import "./assetList.less";

export default {
    name: "assetList",
    components: {

        //头部导航
        pageTitle: resolve => require(["@src/common/pageTitle/pageTitle"], resolve),

        //搜索框
        searchInput: resolve =>require(["@src/common/components/searchInput/searchInput"], resolve),

        //暂无数据
        newNoData: resolve =>require(["@src/common/newNoData/newNoData"], resolve),

        //弹窗
        messageBox: resolve =>require(["@src/common/components/messageBox/messageBox"], resolve),
    },
    data() {
        return {

            //title配置
            title: "资产配置",
            rightIconButton: {
                type: "icon",
                className: "&#xe65e;"
            },

            //头部tab配置
            isChecked: 0, //保存选中的索引
            tabItems: ["待确认", "已完成"], 

            //搜索框配置
            searchPrompt: "请输入用户姓名", //placeholder
            searchBtnTxt: '搜索',
            
            noData: false, //不显示暂无数据
            loading: false, // 是否显示加载中状态
            allLoaded: false, //可进行上拉

            noMore: false, //分页没有更多数据展示
            nopage: false, // 没有下一页判断

            type: "", // 判断加载类型，是下拉刷新亦或上拉加载
            busy: false, // 用于无限循环组件是否可以使用

            dicDataList: [],

            //生命周期 字典值数据存储
            lifeTermDic: [],

            //风险承受能力 字典值数据存储
            riskTypeDic: [],

            //存储列表接口返回数据
            listData: [],

            searchName: "", //存储搜索内容字段

            //给接口的入参
            sendData: {
                pageNum: 1, //起始页为1
                pageSize: 20, //一页20条
                customerName: "", //客户姓名
                confirmStatus: 0  //文档上还没写，不知道是啥。。应该是待确认和已完成的标识，默认设置为待确认的
            },

        };
    },
    created() {
        var that = this;

        //请求字典接口
        this.getDic();
    },

    methods: {

        //获取字典
        getDic() {
            var that = this;

            this.$axiosHttp.http({
                name: "获取字典",
                url: apiUrl.getCustomerAssetDictionaryApi,
                needFailCallback: true,
                data: ["1001", "1002"]
            },
            res => {
                /* 1000是与否
                    1001生命周期阶段
                    1002客户风险承受能力
                    1003资产分类
                    1004资产类别
                    1005项目类型
                    1006细分策略
                    1007家庭未来现金流稳定性
                */
                this.lifeTermDic = res.data.data[1001];
                this.riskTypeDic = res.data.data[1002];

                //请求第一屏数据
                this.loadTop();
            });
        },

        //点击问卷邀答按钮
        shareZcpz() {
            //和app交互
        },

        //点击  去查看报告
        gotoDetail( assetConfigId, isReportable ) {
            if (isReportable == "1") {
                //可查看
                //app拦截此链接去下载，assetConfigId和customerName是pdf下载接口需要的两个入参
                window.location.href = goUrl.assetReport + "?assetConfigId=" + assetConfigId + "&customerName=" + encodeURI($_this.attr("customerName"));
            } else {
                console.log('弹窗')
                //不可查看，弹窗提示
                this.$refs.messageBox.open({
                    message: '资产配置已升级，当前旧报告可能存在数据差异，建议您重新生成一份哦~',
                    confirmButtonText: '我知道了',
                });
                // this.messageShow = true
                // tipAction("请先填写客户信息和问卷，再查看报告");
            }
        },

        //点击推送客户按钮
        pushCustomerBtn(id) {
            that.$axiosHttp.http(
                {
                    url: apiUrl.assetConfigPushCustomerApi,
                    needFailCallback: true,
                    name: "推送客户",
                    params: {
                        assetConfigId: id
                    }
                },
                res => {
                    e.target.innerHTML = "已推送";
                    e.target.className = "overSend";
                },
                res => {
                    tipAction(res.data.message);
                }
            );
        },

        //去新建、编辑资产配置页面
        //type == edit - 编辑
        //type == add - 新建
        goAssetStep( type, id) {
            if( type == 'edit' || type == 'sure'){
                //编辑或新建
                this.$router.push({path: goUrl.zcpzStepUrl, query:{ type: type, id: id}})
            }
            else{
                //新建，不传id
                this.$router.push({path: goUrl.zcpzStepUrl, query:{ type: type}})
            }
        },

        // 上拉加载
        loadMore() {
            //页码加1
            this.sendData.pageNum = this.sendData.pageNum + 1;
            this.loading = true
            this.getData()
        },

        // 下拉刷新方法
        loadTop() {
            this.sendData.pageNum = 1;
            this.getData("loadTop");
        },

        //点击搜索 搜索关键字
        searchBtnActive( searchName ) {
            //设置入参的客户名称为输入框的值
            this.sendData.customerName = searchName
            //重新请求列表数据
            this.loadTop()
        },

        //点击tab切换按钮
        getItemIndex(item) {
            this.isChecked = item
            //设置tab的值
            this.sendData.confirmStatus = item
            //重置搜索框的值为空
            this.sendData.customerName = ""
            //重新请求列表数据
            this.loadTop()
        },

        

        //获取列表数据
        getData( type ) {
            var that = this;

            if( type == 'loadTop'){
                //下拉刷新时，重置列表数据为空数组
                this.listData = []
            }

            this.$axiosHttp.http({
                url: apiUrl.getCustomerAssetConfigListApi,
                needFailCallback: true,
                name: "查询列表",
                params: this.sendData
            },
            res => {
                //隐藏加载提示

                if (res.data.data.length) {

                    //把字典值和正确文案对应起来
                    var data = res.data.data.concat([]);

                    data.forEach((course, courseIndex, array) => {

                        if (course.customerName.length > 10) {
                            course.customerName = course.customerName.substr(0, 10) + "...";
                        }

                        //对比生命周期字典值，设置生命周期
                        this.lifeTermDic.forEach(( el, i, arr) => {
                            if (el.keyNo == course.lifeTerm) {
                                course.lifeTermText = el.keyValue
                            }
                        })

                        //对比风险承受能力字典值，设置风险承受能力
                        this.riskTypeDic.forEach(( el, i, arr) => {
                            if (el.keyNo == course.riskType) {
                                course.riskTypeText = el.keyValue
                            }
                        })
                        
                    });

                    this.listData = this.listData.concat(data);
                }
                else{
                    //接口返回不是1000但也没有数据
                    if( this.sendData.pageNum == 1){
                        //第一屏
                        this.noData = true
                    }
                    else{
                        this.noMore = true
                    }
                }
                this.loading = false
            }, null, (res, code) => {
                //无数据的情况
                if( this.sendData.pageNum == 1){
                    //第一屏
                    this.noData = true
                }
                else{
                    this.noMore = true
                }
                this.loading = false
            });
        },
        searchInputShow() {
            if (this.searchShow) {
                this.searchShow = false;
                this.searchBoxBlock = false;
            } else {
                this.searchShow = true;
                this.searchBoxBlock = true;
            }
        },
        // 搜索
        enterClick(event) {
            if (event.keyCode == 13) {
                //如果按的是enter键 13是enter
                event.preventDefault(); //禁止默认事件（默认是换行）
                //获取用户输入的文字
                this.customerName = event.target.value;
                //重新渲染上拉加载
                this.muiPullUpArr[0].dataDeal(3);
            }
        },

        //跳转到新建/编辑资产配置
        //type=edit时，是编辑，用传过去的资产配置id请求回显数据
        // goNewAsset(type, id) {
        //     this.$router.push({ path: goUrl.zcpzStepUrl });
        // },

        //推送客户
        sendCustomer(id) {
            that.$axiosHttp.http({
                url: apiUrl.assetConfigPushCustomerApi,
                needFailCallback: true,
                name: "推送客户",
                params: {
                    assetConfigId: id
                }
            },
            res => {
                this.listData.isPush = "1";
            });
        },

    }
};
</script>
